<template>
    <!-- 主要工序穿插技术 -->
    <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :rules="editModel == 0 ? {} : rules" :class="editModel == 0 ? '' : 'rulesForm'">
      <!-- 表格 -->
      <a-card :bordered="false">
        <title-name title="项目主要工序穿插计划"></title-name>
        <!-- <div>
          <a-button type="primary" @click="addLine" :disabled="editModel == 0">增行</a-button>
          <a-button @click="delLine" style="margin-left: 20px" :disabled="editModel == 0">删除行</a-button>
        </div> -->
        <custom-form :formList="formList" :form="form" :is-emit="false" :editModel="editModel == 0 ? '' : ''">
          <template v-slot:table>
            <a-form-model-item class="formTable" label=" " :colon="false">
              <a-table 
                ref="formTable"
                :loading="loading"
                bordered 
                :columns="columns" 
                :data-source="dataList" 
                :pagination="false">
                <span
                  slot="serial"
                  slot-scope="text, record, index"
              >{{ index + 1 }}</span>
                <template v-for="col in ['mainProcessPoint', 'businessMatters', 'startDate', 'endDate']" :slot="col" slot-scope="text, record,index">
                    <div :key="col" class="form-item">
                        <template>
                            <BaseInput :maxLength='300' v-if="col === 'mainProcessPoint'" v-model="record[col]" :disabled="editModel == 0"></BaseInput>
                            <!-- <a-date-picker v-else-if="col === 'startTime'" value-format="YYYY-MM-DD" v-model="record[col]" :disabled="editModel == 0" @change="changeDate(index)"></a-date-picker>
                            <a-date-picker v-else-if="col === 'endTime'" value-format="YYYY-MM-DD" :disabled-date="(current)=>{return disabledDate(current,record)}" v-model="record[col]" :disabled="editModel == 0"></a-date-picker> -->
                            <span v-else-if="col === 'businessMatters'">{{record[col]}}</span>
                            <span v-else-if="col === 'startDate'">{{record[col]}}</span>
                            <span v-else-if="col === 'endDate'">{{record[col]}}</span>
                            <span v-else>{{record[col]}}</span>
                        </template>
                    </div>
                </template>
              </a-table>
            </a-form-model-item>
          </template>
        </custom-form>
      </a-card>
    </a-form-model>
     
  </template>
  
  <script>
  import { queryPenetrationPlanQueryDetail, penetrationPlanEditMainProcessPoint} from '@/api/project/plannManagement/interpenetrationPlan.js' // api
  import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
  import moment from 'moment'
  import { isNull } from './model.js'
  const columns = [
     {title: '序号',width: 80, scopedSlots: { customRender: 'serial' }, align: 'center'},
    { title: '主要工序穿插点', dataIndex: 'mainProcessPoint', align: 'center', scopedSlots: { customRender: 'mainProcessPoint' } },
    { title: '插入工作', dataIndex: 'businessMatters', align: 'center', scopedSlots: { customRender: 'businessMatters' } },
    { title: '计划开始时间', dataIndex: 'startDate', align: 'center', scopedSlots: { customRender: 'startDate' } },
    { title: '计划结束时间', dataIndex: 'endDate', align: 'center', scopedSlots: { customRender: 'endDate' } }
  ]
  export default {
    name: 'mainProcess' + Date.now(),
    extends: new BaseEditPage(),
    components: {
    },
    props: {
      statusBasicSuc: {
        type: Boolean,
        default: () => {}
      }
    },
    data() {
      return {
        columns,
        editModel: 1, // 操作状态:0 查看;1 编辑
        planId: null,
        status:null,
        dataList: [],
        rulesArr: [],
        id: '',
        rules: {}, // 校验规则
        init: false, // 初始化控件
        loading: false,
      }
    },
    watch: {
      statusBasicSuc: {
        handler(val, oldVal) {
          let form = this.$clone(this.form)
          form.status = this.status
          form.schemeDetailId = this.id
          form.changed = this.pageType == 'change' ? true : false // 是编辑还是变更
          val && this.statusBasicSucFn(this.rulesArr);
        },
        deep: true
      }
    },
    created() {},
    async mounted() {
      await this.getDetailData()
    },
    computed: {
      formList() {
        return [
          {
            slot: true,
            customItemSlot: true,
            keyName: 'table',
            span: 24
          }
        ]
      }
    },
    methods: {
      getDetailData() {
        // 不为添加时请求详情
        this.loading = true;
         this.$emit('update:spinning', true)
          let reqObj = {
            pageNo: 1,
            pageSize: 3000,
            param: {
                schemeDetailId: this.id,
                latestData:true,
            }
          }
          if (this.version) {
            reqObj.param.version = this.version,
            reqObj.param.latestData = false
          }
          queryPenetrationPlanQueryDetail(reqObj)
            .then((res) => {
              this.$emit('update:spinning', false)
                if(res.data && res.data.length){
                    this.dataList = res.data;
                }
                this.$nextTick(() => {
                    this.init = true
                    this.loading = false
                })
            })
            .catch(() => {
              this.$emit('update:spinning', false)
            })
      },
      /**
       * 提交表单
       */
       interpenetrationPlanSubmit(baseData) {
        if(this.transData()) {
          this.sure(1, baseData)
        }
      },
      sure(str, baseData) {
        let that = this
        if(str === 1) {
          this.$confirm({
            okText: '确认',
            cancelText: '取消',
            title: '提交?',
            content: `请确认是否要提交?`,
            onOk() {
              that.submitFn(str, baseData)
            },
            onCancel: () => { this.$emit('update:spinning', false)}
          })
        }else {
          
          that.submitFn(str, baseData)
        }
        
      },
      interpenetrationPlanSaveDrafts(baseData) {
        if(this.dataList.length < 1) return this.$message.warning('没有工序穿插计划不可保存！')
        //保存草稿
        if(this.transData()) {
          this.sure(0, baseData)
        }
      },
      submitFn(status, baseData) {
        this.$emit('update:spinning', true)
        baseData.schemeDetailId = this.id
        baseData.status = status
        this.status = status;
        this.$emit('updateBasicDetail', baseData)
      },
      statusBasicSucFn(formData) {
          let msg = this.status * 1 === 1 ? '提交' : '保存草稿'
          penetrationPlanEditMainProcessPoint(formData).then(() => {
              this.$emit('update:spinning', false)
              this.$message.success(`${msg}成功！`)
              this.$emit('closePage')
          })
          .catch((err) => {
            this.$emit('update:spinning', false)
          })
      },
      transData() {
        let dataDable = this.dataList
        let rulesArr = [];
        if (dataDable.length < 1) {
            this.$message.warning('请至少填写一行数据')
            return
        } else {
            let flag = false;
            dataDable.map((item) => {
                if(!item.mainProcessPoint) flag = true;
                rulesArr.push({
                    id: item.id,
                    mainProcessPoint: item.mainProcessPoint
                })
            })
            if (flag) {
              this.$message.warning('请完善表格数据')
              return false
            }
        }
        this.rulesArr = rulesArr;
        return true;
      },
    }
  }
  </script>
  <style lang="less" scoped>
  @deep: ~'>>>';
  .scene {
    display: block;
    margin: 10px 0 10px 60px;
    color: rgba(0, 0, 0, 0.85);
  }
  .rulesForm {
    @{deep} .ant-input,
    @{deep} .ant-input-work-input,
    @{deep} .ant-select .ant-select-selection {
      border-color: #e4ac0b;
      background-color: #fff9e8;
    }
    @{deep} .mandatory .ant-input {
      border-color: #d9d9d9;
      background-color: #fff;
    }
    @{deep} .setPlaceholder {
      .ant-select-selection__placeholder {
        display: block !important;
      }
    }
  }
  @{deep} .formTable {
    .ant-form-item-label {
      width: 0;
    }
    .ant-form-item-control-wrapper {
      width: 100%;
    }
  }
  </style>